import { Component } from 'react'
import { inject, observer } from 'mobx-react'
@inject('todo')
@observer
class TodoList extends Component {
  render() {
    const { todoDelete, changeCompleted, filterTodoS } = this.props.todo
    return (
      <section className='main'>
        <input className='toggle-all' type='checkbox' />
        <ul className='todo-list'>
          {(filterTodoS.map((todo, index) => (
            <li className={ todo.isCompleted ? 'completed' : '' } key={todo.taskName}>
              <div className='view'>
                <input 
                  className='toggle' 
                  type='checkbox' 
                  checked={todo.isCompleted}
                  onChange={() => changeCompleted(todo)}/>
                <label>{todo.taskName}</label>
                <button className='destroy' onClick={() => todoDelete(index)}></button>
              </div>
              <input className='edit' />
            </li>
          )))}
        </ul>
      </section>
    )
  }
}

export default TodoList
